import React, { Component } from 'react'
import './child.scss'

export default class Child extends Component {
    // 加载完成之后
    componentDidMount() {
        // 标准来说是ajax写在这里
        // console.log("Child-componentDidMount")
        this.setTime()
    }
    // 初始化方法
    setTime() {
        this.state.id = setInterval(()=>{
            this.state.pArr.push(this.state.num)
            this.state.num ++
            this.setState({
                pArr:this.state.pArr
            })
        },2000)
    }
    constructor() {
        super()
        // console.log("Child-constructor")
        this.state = {
            n:999,
            pArr:[],
            num:1,
            id:null
        }
    }
    topFn(event){
        console.log(event)
        document.querySelector(".content").scrollTop = 0
    }
	
    render() {
        // console.log("Child-render")
        return (
            <>
                <div>child显示的num{this.props.num}
                <button onClick={()=>{this.forceUpdate()}}>强制更新</button></div>
                <div className='content'>
                    <span onClick={this.topFn.bind(this)} className='con_top'>置顶</span>
                    {
                        this.state.pArr.map((value,index)=>{
                            return <p key={index}>{value}</p>
                        })
                    }
                    
                </div>
            </>
        
        )
    }
    
    // 组件将要销毁
    componentWillUnmount() {
        // console.log("Child-componentWillUnmount")
        // 清楚定时器
        clearInterval(this.state.id)
    }
    
    // 生命周期里面唯一可以做优化的生命周期
    shouldComponentUpdate(props) {
        // console.log("Child-shouldComponentUpdate")
        // console.log(props,this.props)
        // if(props.num == this.props.num) {
        //     // 如果传递过来的props.num 是跟之前一样，那么不更新，否则更新
        //     return false
        // } else {
        //     return true
        // }
        return true
        
    }
    // 组件更新完毕
    componentDidUpdate(props,state,Snapshot) {
        // console.log(Snapshot,document.querySelector(".content").scrollHeight,"componentDidUpdate")
        // console.log(Snapshot,document.querySelector("#span").innerHTML)
        // console.log("Child-componentDidUpdate",props,state,Snapshot)
        // console.log(document.querySelector(".content").scrollTop)
        document.querySelector(".content").scrollTop += document.querySelector(".content").scrollHeight - Snapshot
    } 
    static getDerivedStateFromProps() {
        // console.log("Child-getDerivedStateFromProps")
        return {}
    }
    // 获取快照在更新前
    getSnapshotBeforeUpdate() {
        // console.log("Child-getSnapshotBeforeUpdate")
        // console.log(document.querySelector(".content").scrollHeight,"getSnapshotBeforeUpdate")
        return document.querySelector(".content").scrollHeight
    }
}